<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "库存管理"
  }
}
</route>

<script lang="ts" setup>
import md5 from 'crypto-js/md5'
import { useToast } from 'wot-design-uni'
import bgImg from '/static/images/inventoryBg.png'

const toast = useToast()
const secret = 'MX888888!@#' // 和前端生成二维码时用的密钥一致
const navigator = [
  {
    id: 1,
    title: '库存入库',
    href: '/pages/inventory/inventoryIn/create',
    icon: 'icon-rukuguanli',
    bg: 'bg-[linear-gradient(to_bottom,#e6a733,#e8ae39)]',
  },

  {
    id: 2,
    title: '库存出库',
    href: '/pages/inventory/inventoryOut/create',
    icon: 'icon-chukuguanli',
    bg: 'bg-[linear-gradient(to_bottom,#1DC36A,#31C877)]',
  },
  {
    id: 3,
    title: '库存信息',
    href: '/pages/inventory/inventoryInfo/index',
    icon: '.icon-kucunguanli',
    bg: 'bg-[linear-gradient(to_bottom,#0066FF,#6786EE)]',
  },
]

function scanCode(item) {
  // console.log('scanCode', item, index)

  uni.scanCode({
    success(res) {
      if (res.errMsg === 'scanCode:ok') {
        try {
          const data = JSON.parse(res.result)
          if (data.code && data.sign) {
            // 先提取id数字
            const match = data.code.match(/INV-(\d+)/)
            if (!match) {
              toast.error('二维码格式错误')
              console.error('二维码格式错误')
              return
            }
            const id = match[1]

            // 再计算签名校验
            const expectedSign = md5(id + secret).toString()
            if (expectedSign !== data.sign) {
              toast.error('二维码签名校验失败，可能伪造')
              return
            }

            // 签名通过且id有效，可以继续请求详情页或入库
            goToPage(`${item.href}?id=${id}`)
          }
          else {
            console.error('二维码缺少必要字段')
          }
        }
        catch (err) {
          console.error('二维码解析失败', err)
        }
      }
      else {
        console.error('扫码失败')
      }
    },
    fail(err) {
      console.error('扫码失败', err)
    },
  })
}
function goToPage(url) {
  uni.navigateTo({ url })
}

function jumpPage(item) {
  if (item.id === 1 || item.id === 2) {
    scanCode(item)
  }
  else {
    goToPage(item.href)
  }
}
</script>

<template>
  <!-- <view class="index_page" style="background:url('../../static/bg.png');background-size: 381px 381px;background-repeat: no-repeat;"> -->
  <view
    class="h-100vh w-100vw"
    :style="{ backgroundImage: `url(${bgImg})`, backgroundSize: '381px 381px', backgroundRepeat: 'no-repeat' }"
  >
    <view
      class="[text-shadow:0px_2px_2px_rgba(24,144,255,0.08)] mb-12 mt-28 text-center text-[20px] text-[#1dc36a] font-extrabold leading-[140%] tracking-[0em] font-[ZhenyanGB]"
    >
      库存管理，健康，高效，安全至上
    </view>
    <view class="mx-auto w-9/10 flex flex-col items-center justify-center text-center">
      <view
        v-for="item in navigator"
        :key="item.title" class="my-2 my-2 h-[12vh] w-9/10 flex items-center justify-between rounded-lg px-4 text-#fff" :class="item.bg"
        @click="jumpPage(item)"
      >
        <view class="title">
          <text style="font-size: 36rpx;">
            {{ item.title }}
          </text>
        </view>
        <view class="iconfont text-12" :class="item.icon" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.index_page {
  width: 750rpx;
  // height: 100vh;
  background-color: #f5f8fe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
  position: relative;

  .tip {
    /* 食堂管理，健康、高效、安全至上 */

    position: absolute;
    left: 46.66px;
    top: 105.67px;
    width: 300px;
    height: 22.97px;
    opacity: 1;

    font-family: ZhenyanGB;
    font-size: 20px;
    font-weight: 800;
    line-height: 140%;
    text-align: center;
    letter-spacing: 0em;
    text-align: center;
    font-variation-settings: 'opsz' auto;
    color: #1dc36a;

    text-shadow: 0px 2px 2px rgba(24, 144, 255, 0.08);

    // .purchase {
    //   position: absolute;
    //   left: 20px;
    //   top: 172.94px;
    //   width: 336px;
    //   height: 78px;
    //   border-radius: 12px;
    //   opacity: 1;
    //   display: flex;
    //   align-items: center;
    // }
    .purchase {
      @apply bg-gradient-to-b from-[#e6a733] to-[#e8ae39];
    }

    .inspection {
      position: absolute;
      left: 20px;
      top: 265.94px;
      width: 336px;
      height: 78px;
      border-radius: 12px;
      opacity: 1;
      background: linear-gradient(180deg, #0066ff 0%, #6786ee 100%);
      display: flex;
      align-items: center;
    }

    .keepSample {
      position: absolute;
      left: 20px;
      top: 358.94px;
      width: 336px;
      height: 78px;
      border-radius: 12px;
      opacity: 1;
      background: linear-gradient(180deg, #1dc36a 0%, #31c877 100%);
      display: flex;
      align-items: center;
    }

    // .nav-btn {
    //   .icon-img {
    //     width: 50rpx;
    //     height: 50rpx;
    //     vertical-align: middle;
    //     margin-right: 25rpx;
    //   }

    //   width: 80%;
    //   line-height: 120rpx;
    //   color: #333;
    //   border: 1px solid grey;
    //   margin: 50rpx auto;
    //   text-align: center;
    //   border-radius: 10rpx;

    //   &:hover {
    //     background: #fe5ba4;
    //     color: #fff;
    //     border: 0;
    //   }
    // }
  }
}
</style>
